<template>
    <div class="files-content" ref="filesDom">
        <div v-for="(item, key, index) in curData" :key="index">
            <div class="title">
                <span>{{ key }}</span>
                <span @click="allIn_ClickEvent(key)">全部下载</span>
            </div>
            <div class="path" v-for="(file, findex) in item" :key="findex" @click="gto_ClickEvent(file, index)">
                {{ getFileName(key, file) }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';

const props = defineProps({
    curData: {
        type: {},
        default: {},
    }
});

const emits = defineEmits(['heightChange']);

const curData = ref({});
let downInterval = null;

onMounted(() => {
    curData.value = props.curData;

    setTimeout(() => {
        let h = 0;
        for (let key in curData.value) {
            const element = curData.value[key];
            h += 30 + element.length * 23;
        }
        emits('heightChange', h + 30);
    }, 500);
});

const getFileName = (key, str) => {
    const index = str.indexOf(key);
    const cur = str.substring(index, str.length);
    return cur;
}

const allIn_ClickEvent = (key) => {
    const files = curData.value[key];
    console.log(files)

    const dmm = window.open(files[1], "_blank");
    dmm.onload = () => {
        console.log('emmm')
    }
    // window.close();

    return

    let index = 0;
    if (downInterval) {
        clearInterval(downInterval);
        downInterval = null;
    }
    downInterval = setInterval(() => {
        window.open(files[index], "_blank");
        index++;
        if (index >= files.length) {
            clearInterval(downInterval);
            downInterval = null;
        }
    }, 1000);
}


</script>

<style scoped lang="scss">
.files-content {
    position: absolute;
    top: 0;
    font-weight: 900;
    padding: 15px;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
    height: 100%;

    .title {
        font-size: 18px;
        padding: 3px;
        color: rgb(66, 66, 66);

        >span:nth-child(2) {
            margin-left: 20px;
            font-size: 14px;
            color: var(--b);
            transition-duration: 0.3s;
        }

        >span:nth-child(2):hover {
            cursor: pointer;
            margin-left: 20px;
            font-size: 14px;
            color: var(--r);
        }
    }

    .path {
        font-size: 16px;
        padding: 1px 10px;
        color: rgb(66, 66, 66);
        cursor: pointer;
        transition-duration: 0.2s;
    }

    .path:hover {
        color: #409eff;
        text-decoration-line: underline;
    }
}
</style>